<template>
  <div class="time-series-add">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="form"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="开始时间" prop="start_time">
        <el-time-picker
          arrow-control
          v-model="ruleform.start_time"
          :picker-options="{
            selectableRange: '00:00:00 - 23:59:59',
          }"
          placeholder="任意时间点"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="end_time">
        <el-time-picker
          arrow-control
          v-model="ruleform.end_time"
          :picker-options="{
            selectableRange: '00:00:00 - 23:59:59',
          }"
          placeholder="任意时间点"
        >
        </el-time-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('form')"
          >添加</el-button
        >
        <el-button type="warning" plain @click="onReset('form')"
          >重置</el-button
        >
      </el-form-item>
      <el-link
        class="tips"
        :underline="false"
        type="info"
        icon="el-icon-warning-outline"
        >时间间隔应大于20分钟。</el-link
      >
    </el-form>
  </div>
</template>

<script>
import { dateFormat } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      schedule_id: "",
      weekday: "",
      ruleform: {
        start_time: new Date(2021, 7, 1, 0, 0),
        end_time: new Date(2021, 7, 1, 0, 0),
      },
      rules: {
        start_time: [{ required: false, message: "请输入", trigger: "blur" }],
        end_time: [{ required: false, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.schedule_id = this.$route.query.schedule_id;
    this.weekday = this.$route.query.week;
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;

      console.log(that.ruleform.start_time);
      console.log(that.ruleform.end_time);
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/mem/schedule/serial/insert", {
            schedule_id: that.schedule_id,
            weekday: that.weekday,
            start_time: dateFormat(that.ruleform.start_time),
            end_time: dateFormat(that.ruleform.end_time),
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                //更新tabel组件
                that.$store.commit(
                  "setSubmitData",
                  Math.floor(Math.random() * 10000000)
                );
                // let datas = resetForm(that.ruleform, this.$refs[formName]);
                // that.ruleform = datas;
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
.time-series-add {
  padding: 20px 0 30px 30px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.totalFlow-form {
  padding-left: 30px;
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.time-series-add >>> .el-form--inline .el-form-item__content {
  display: inline-block;
}
.time-series-add >>> .el-radio {
  margin-top: 0;
}
.show-schedule_id {
  line-height: 50px;
  margin-bottom: 10px;
  /* font-weight: 600; */
}
.time-series-add >>> .el-date-editor .el-range-separator {
  width: 7% !important;
}
.time-series-add >>> .tips {
  margin-top: 10px;
  display: block;
  font-size: 15px;
}
</style>
